<template>
	<div id="data">
		<!-- @rightBtn="on()"  ：子组件传递的信息 ，父组件介绍-->
		<toptitle :conter="'修改资料'" @rightBtn="on()" :right="'保存'">
		</toptitle>
		<div class="top">
			<div class="img">
				<label>
					<img :src="userInfo.headImg" alt="用户头像">
				</label>
			</div>
			<div class="title" @click="fileChange()">
				修改头像
			</div>
		</div>

		<!-- 編輯區域 -->
		<div class="conter">
			<div class="title">常规</div>
			<div class="li1 li" @click="modalA = true">
				<div class="le_name">昵称</div>
				<div class="ri_name">{{ userInfo.nickName }}</div>
			</div>

			<Modal v-model="modalA" title="请输入修改后的昵称" @on-ok="okA" @on-cancel="cancel">
				<p>
					<input type="text" v-model="userInfo.nickName">
				</p>
			</Modal>

			<div class="li2 li" @click="modalB = true">
				<div class="le_age">性别</div>
				<div class="ri_age">
					{{ userInfo.sex == null ? '保密' :userInfo.sex == 0 ? '女' : '男'}}
				</div>
			</div>
			<div class="radio">
				<Modal v-model="modalB" title="性别" @on-ok="okB" @on-cancel="cancel" id="radio">
					<label>
						<input type="radio" name="radio" v-model="userInfo.sex" value="保密">
						保密
					</label>
					<label>
						<input type="radio" name="radio" v-model="userInfo.sex" value="男">
						男
					</label>
					<label>
						<input type="radio" name="radio" v-model="userInfo.sex" value="女">
						女
					</label>
				</Modal>
			</div>

			<div class="li3 li">
				<div class="le_jj">个人简介</div>
				<div class="ri_tent">
					<textarea placeholder="写点什么吧" v-model="userInfo.desction"></textarea>
					<span> {{ userInfo.desction == null ? 0 : userInfo.desction.length }}/150</span>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	// <!-- 导入api文件 -->
	import {
		// 获取用户信息
		getUserInfo,
		// 修改用户信息
		editUserInfo,
		// 上传文件（头像）
		uploadFile
	} from "@/api/user"
	// 引入顶部栏组件
	import toptitle from "@/components/top_title.vue"
	export default {
		components: {
			// 注册顶部栏组件
			toptitle,
		},
		data() {
			return {
				// 用户数据
				userInfo: JSON.parse(localStorage.getItem('userInfo')),
				modalA: false,
				modalB: false,
			}
		},
		watch: {
			"userInfo.desction"(nVal) {
				// console.log(nVal);
				this.userInfo.desction = nVal.substr(0, 150)
			}
		},
		methods: {
			cancel() {
				this.$Message.info('取消修改');
			},
			// 昵称修改完成
			okA() {
				this.$Message.success('修改完成');
			},
			// 性别修改完成
			okB() {
				this.$Message.success('修改完成');
			},
			on() {
				editUserInfo(this.userInfo).then(res => {
						if (res.data.code == 1) {
							this.$Message.success('保存完成');
							// 重新获取用户信息
							getUserInfo().then(result => {
								// 先更新本地token
								localStorage.setItem('token', result.data.result.token);
								// 更新data里面的 用户信息数据
								this.userInfo = result.data.result;
								// 更新本地存储 localStorage的用户信息
								localStorage.setItem('userInfo', JSON.stringify(this.userInfo))
							})
						}
					})
					.catch(err => {
						console.error(err)
					})
			},
			fileChange() {
				// 定义this指向
				let _this = this;
				// 创建input元素
				let input = document.createElement('input');
				// 改变type值
				input.type = 'file';
				// 主动触发input的点击事件
				input.click();
				// 监听input的变化
				input.onchange = function(e) {
					// 创建formData
					let data = new FormData();
					// 把文件放在data中
					data.append('file', input.files[0])
					// 调用上传文件接口
					uploadFile(data).then(res => {
						// console.log(res);
						if (res.data.code == 1) {
							// 弹出提示信息
							_this.$Message.success(res.data.msg);
							// 修改头像的地址
							_this.userInfo.headImg = res.data.result
						} else {
							_this.$Message.error(res.data.msg)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	// scss 变量
	$width: (100vw / 375);

	#data {
		width: 100vw;
		height: 100vh;
		background-color: #f4f4f4;
		overflow: hidden;

		.top {
			width: 100%;
			height: 200 * $width;
			margin-top: 44 * $width;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.img {
				width: 90 * $width;
				height: 90 * $width;
				border-radius: 50%;
				overflow: hidden;
				margin-bottom: 10 * $width;

				img {
					width: 100%;
					height: 100%;
				}

				label {
					input {
						display: none;
					}
				}
			}

			.title {
				color: #3286ff;
			}
		}

		.conter {
			width: 94%;
			height: 333 * $width;
			margin: 0 * $width 3%;
			background-color: #fff;
			border-radius: 15 * $width;
			box-sizing: border-box;
			padding: 20 * $width;

			.title {
				font-weight: 800;
				font-size: 17 * $width;
			}

			.li {
				display: flex;
				justify-content: space-between;
				height: 40 * $width;
				line-height: 40 * $width;

				.ri_tent {
					min-width: 200 * $width;
					min-height: 170 * $width;
					margin-top: 20 * $width;
					position: relative;

					textarea {
						width: 200 * $width;
						height: 170 * $width;
						border-radius: 10 * $width;
						border-color: #ccc;
						outline: none;
						padding: 0 10 * $width;
					}

					span {
						font-size: 12 * $width;
						color: #707070;
						position: absolute;
						bottom: -5 * $width;
						right: 10 * $width;
					}
				}
			}


		}
	}

	// 模态框
	.ivu-modal-body {
		width: 366 * $width;

		p {
			width: 100%;
			height: 1000%;

			input {
				width: 100%;
				height: 1000%;
				border: none;
				outline: none;
			}
		}
	}

	#radio {

		label {
			margin-right: 20 * $width !important;
			line-height: 53 * $width;

			input {
				margin-right: 3 * $width;
			}
		}
	}
</style>
